<script setup>
import { ref, defineProps } from 'vue';

const props = defineProps({
  records: {
    type: Array,
    default: () => []
  }
});
</script>

<template>
  <div class="marginTop">
    <div v-for="(record, index) in props.records" :key="index" class="mb-[10px]">
      <div class="text-[14px] text-[#666]">{{ record.date }}</div>
      <div v-for="(item, itemIndex) in record.items" :key="itemIndex" class="elasticity backgroundColor padding roundCorner mt-[5px]">
        <div class="w-[180px]">
          <div class="text-[12px] rate">{{ item.name }}</div>
          <div class="fontSize2">共计{{ item.total }}件</div>
        </div>
        <div class="flex items-center">
          <div class="mr-[5px]">
            <!-- 仅在存在 profit、loss 或 totalPrice 时显示 -->
            <div v-if="item.profit !== undefined || item.loss !== undefined || item.totalPrice !== undefined">
              <div v-if="item.profit !== undefined" class="flex">
                <div class="fontSize2 mr-[3px]">盈</div>
                <div class="fontSize2 text-[#1ECD84]">{{ item.profit.toFixed(2) }}</div>
              </div>
              <div v-if="item.loss !== undefined" class="flex">
                <div class="fontSize2 mr-[3px]">亏</div>
                <div class="fontSize2 text-[#FF4000]">{{ item.loss.toFixed(2) }}</div>
              </div>
              <div v-if="item.totalPrice !== undefined" class="flex">
                <div class="fontSize2 mr-[3px]">总计</div>
                <div class="fontSize2 text-[#FF4000]">{{ item.totalPrice.toFixed(2) }}</div>
              </div>
            </div>
          </div>
          <van-icon name="arrow" color="#999" />
        </div>
      </div>
    </div>
    <van-empty v-if="props.records.length === 0" description="暂无数据" />
  </div>
</template>

<style scoped>
/* 添加你的 CSS 样式 */
</style>